<script lang="ts" setup>
import { computed, onMounted, ref } from 'vue';

import { IconifyIcon } from '@vben/icons';

import { Dayjs } from 'dayjs';
import { getDetailByMonth } from '#/api/moxi/dingdattendanceinfo';

import { Avatar, Badge, Button, Card, Statistic, Divider, } from 'ant-design-vue';

const value = ref<Dayjs>();
const emit = defineEmits(['back']);
const back = () => {
    emit('back');
};

// 获取传值
interface Props {
    rowData?: any;
}
const props = withDefaults(defineProps<Props>(), {
    rowData: null,
});

// 存储考勤数据
const attendanceData = ref<any[]>([]);

// 根据日期获取考勤数据的函数
const getAttendanceByDate = (date: string) => {
    return attendanceData.value.find((item) => item.attendanceDate === date);
};

onMounted(async () => {
    console.log(props.rowData);

    if (props.rowData) {
        try {
            const res = await getDetailByMonth({
                userid: props.rowData.row.userid,
                attendMonth: props.rowData.attendMonth,
            });
            attendanceData.value = res || [];
        } catch (error) {
            console.error('获取部门数据失败', error);
        }
    }
});
// 点击切换的时候重新拉取数据
const onPanelChange = async (value: Dayjs, mode: string) => {
    const monthStr = value.format('YYYY-MM');
    console.log(monthStr);
    const res = await getDetailByMonth({
        userid: props.rowData.row.userid,
        attendMonth: monthStr,
    });
    attendanceData.value = res || [];
};

</script>
<template>
    <Page>
        <div class="mt-4 flex flex-col gap-4 md:flex-row">
            <Card :bordered="false" class="md:w-2/2 w-full">
                <template #title>
                    <div class="flex items-center" style="justify-content: space-between;">
                        <span class="ml-2 text-lg font-medium">考勤管理</span>
                        <a-button type="primary" @click="back">
                            返回
                        </a-button>
                    </div>
                </template>

                <div class="flex text-center">
                    <div class="w-1/6">
                        <statistic title="员工名称" :value="props.rowData.row.name" :value-style="{ color: '#000' }"
                            style="margin-right: 50px">
                        </statistic>
                    </div>
                    <div class="w-1/6">
                        <statistic title="应出勤" :value="props.rowData.row.shouldAttendanceDays" suffix="天"
                            :value-style="{ color: 'red' }" style="margin-right: 50px">
                        </statistic>
                    </div>
                    <div class="w-1/6">
                        <statistic title="实出勤" :value="props.rowData.row.attendanceDays" suffix="天"
                            :value-style="{ color: 'red' }" style="margin-right: 50px">
                        </statistic>
                    </div>
                    <div class="w-1/6">
                        <statistic title="旷工" :value="props.rowData.row.absenteeismDays" suffix="天"
                            :value-style="{ color: 'red' }" style="margin-right: 50px">
                        </statistic>
                    </div>
                    <div class="w-1/6">
                        <statistic title="休息" :value="props.rowData.row.attendanceRestDays" suffix="天"
                            :value-style="{ color: '#000' }" style="margin-right: 50px">
                        </statistic>
                    </div>
                    <div class="w-1/6">
                        <statistic title="工作时长" :value="props.rowData.row.attendanceWorkTimeHour" suffix="小时"
                            :value-style="{ color: 'red' }" style="margin-right: 50px">
                        </statistic>
                    </div>
                </div>
                <Divider>
                    <span class="text-gray-500"></span>
                </Divider>
                <div class="mb-4 flex items-center rounded-lg p-3">
                    <span class="mr-4 text-xl font-medium">考勤日历</span>
                </div>

                <a-calendar v-model:value="value" @panelChange="onPanelChange">
                    <template #dateCellRender="{ current }">
                        <!-- {{ current.format('YYYY-MM-DD') }} -->
                        <!--  v-if="current.isSame(value, 'day')" -->
                        <div v-if="getAttendanceByDate(current.format('YYYY-MM-DD'))"
                            class="flex grid grid-cols-1 gap-4 text-center">
                            <div class="flex items-center justify-center">
                                <div>
                                    <!-- 出勤 -->
                                    <IconifyIcon v-if="
                                        getAttendanceByDate(current.format('YYYY-MM-DD'))
                                            .attendanceDays > 0
                                    " class="text-3xl text-green-500" icon="lucide:check" />
                                    <!-- <IconifyIcon v-else-if="
                                        ['上班缺卡', '迟到', '未打卡'].includes(
                                            getAttendanceByDate(current.format('YYYY-MM-DD')).attendResult
                                        )
                                    " class="text-3xl text-yellow-500" icon="lucide:clock" /> -->
                                    <IconifyIcon v-else-if="
                                        getAttendanceByDate(current.format('YYYY-MM-DD')).absenteeismDays > 0
                                    " class="text-3xl text-red-500" icon="lucide:x" />
                                    <IconifyIcon v-else class="text-3xl text-gray-500" />
                                </div>
                            </div>
                            <div>
                                <a-button style="width: 80%; float: bottom;color: #fff" :class="{
                                    'border-green-500 bg-green-500':
                                        getAttendanceByDate(current.format('YYYY-MM-DD'))
                                            .attendanceDays > 0,
                                    'border-gray-500 bg-gray-500':
                                        getAttendanceByDate(current.format('YYYY-MM-DD'))
                                            .attendResult == '休息',
                                    'border-red-500 bg-red-500':
                                        getAttendanceByDate(current.format('YYYY-MM-DD')).absenteeismDays > 0
                                }">
                                    <a-tooltip placement="top" :title="getAttendanceByDate(current.format('YYYY-MM-DD'))
                                        .attendResult || '未知'">
                                        {{
                                            (getAttendanceByDate(current.format('YYYY-MM-DD')).attendResult || '未知').length
                                                > 15
                                                ? getAttendanceByDate(current.format('YYYY-MM-DD')).attendResult.slice(0, 15) +
                                                '...'
                                                : getAttendanceByDate(current.format('YYYY-MM-DD')).attendResult || '未知'
                                        }}
                                    </a-tooltip>
                                </a-button>
                            </div>
                        </div>
                    </template>
                </a-calendar>
            </Card>
        </div>
    </Page>
</template>
<style>
/* 取消年月 切换 */
.ant-picker-calendar-header .ant-radio-group {
    display: none !important;
}
</style>
